<template>
  <div class="a-album-box">
    <div class="a-album">
      <div class="a-all" v-for="av in mvs" :key="av.id">
        <!-- allalbum -->
        <a class="a-img">
          <img :src="av.imgurl" alt="" />
          <span></span>
          <!-- <a></a> -->
          <span class="icon"></span>
        </a>
        <div class="a-text">
          <a href="">{{ av.name }}</a>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="parseInt( Math.ceil(total/12) * 10)"
      @current-change="changepage"
    >
    </el-pagination>
  </div>
</template>

<script>
import moment from "moment";
export default {
    props:['total'],
  data() {
    return {
      id: this.$route.query.id,
      limit: 12,
      offset: 0,
      mvs: [],
      //   分页
      limitIndex: 0,
      moment,
    };
  },
  mounted() {
    this.getArtistAlbumList();
  },
  methods: {
    // 请求av
    async getArtistAlbumList() {
      const par = {
        id: this.id,
        limit: this.limit,
        offset: this.limit * this.limitIndex,
      };
      const result = await this.$API.reqArtistAvList(par);
      if (result.code == 200) {
        this.mvs = result.mvs || [];
      } else {
        this.$msg.error("获取av失败");
      }
    },

    // 分页监听器
    changepage(index) {
      // console.log(index)
      this.limitIndex = index - 1;
      this.getArtistAlbumList();
    },
  },
};
</script>

<style lang="less" scoped>
.a-album-box {
  display: flex;
  flex-direction: column;
}
.a-album {
  display: flex;
  flex-flow: wrap;
  //   margin: 30px auto;
  margin-bottom: 20px;
  //   flex-direction: column;
}
.a-all {
  width: 25%;
  margin-top: 10px;
  .a-img {
    position: relative;
    img {
      width: 137px;
      height: 103px;
    }
    span {
      position: absolute;
      width: 137px;
      height: 103px;
      display: block;
      top: -86px;
      background-position: 0 -1170px;
      background-image: url("~@/assets/image/coverall.png");
    }
    .icon {
      display: block;
      width: 44px;
      height: 44px;
      top: -32px;
      left: 50%;
      margin: -22px 0 0 -22px;
      background-position: -30px -135px;
      background-image: url("~@/assets/image/iconall.png");
    }
  }
  .a-text {
    a {
      width: 137px;
      color: #000;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
    }
  }
}
</style>
